<script setup>

import SettingHeader from "@/components/SettingHeader.vue";
import {ref} from "vue";
import router from "@/router/index.js";
import axios from "axios";
const title = '搜索';
const def = ref("")

const put = async (event)=>{
  console.log((await axios.get("https://localhost:8081/art/getArticleBySearch", {
    data: {
      search: event.target.value
    }
  })).data);
}

</script>

<template>
  <SettingHeader :title :url = "{name:'ShoYe'}" />
  <div class = "SearchBox border mt-2 p-2">
    <input type = "text" v-model="def" class = "p-1" placeholder = "搜索游戏">
    <svg t = "1739340034946" class = "icon" viewBox = "0 0 1024 1024" version = "1.1" @click = "router.back()"
         xmlns = "http://www.w3.org/2000/svg" p-id = "4229" width = "32" height = "32" >
      <path
          d = "M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0"
          p-id = "4230"></path>
    </svg>
  </div>
  <div>
    <div class="searchContent-xz">
      <RouterLink class="rou col-6" to="/Content">内容</RouterLink>
      <RouterLink class="rou col-6" to="/Game">游戏</RouterLink>
      <RouterView :Search = "def"/>
    </div>
  </div>
</template>
<style scoped>
.SearchBox {
  height: 50px;
  position: relative;
}
.SearchBox input {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  transition: border-bottom 0.6s ease;
}
svg {
  position: absolute;
  left: 90%;
}
.SearchBox input:focus {
  border-bottom: 1px solid black;
}
.searchContent-xz{
  height: 60px;
  line-height: 60px;
  .rou {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: black;
  }
}
</style>